<template>
	<view class="isBFC">
		<view v-if="config.model === 1" class="goodsWrap1">
			<view class="goods" v-for="item in list" :key="item.goods_id" @click="goProductDetail(item.goods_id)">
				<u--image :showLoading="true" :src="imgHost + item.pic" width="100%" height="none" mode="widthFix"
					lazyLoad></u--image>
				<view class="title">{{ item.goods_title }}</view>
				<view class="bottom">
					<view class="price">￥{{ item.present_price }}</view>
					<view class="saled">已售{{ item.sales }}</view>
				</view>
			</view>
		</view>
		<view v-if="config.model === 2" class="goodsWrap2">
			<view class="goodsInfo" v-for="item in list" :key="item.goods_id">
				<view class="goods" @click="goProductDetail(item.goods_id)">
					<view class="imgWrap">
						<u--image :showLoading="true" :src="imgHost + item.pic" width="100%" height="100%" lazyLoad
							mode="aspectFill"></u--image>
					</view>
					<view class="title two-line">{{ item.goods_title }}</view>
					<view class="bottom">
						<view class="price">￥{{ item.present_price }}</view>
						<view class="saled">已售{{ item.sales }}</view>
					</view>
				</view>
			</view>
		</view>
		<view v-if="loadFinished && list.length === 0" class="emptyWrap">
			<image src="/static/image/empty.png" class="img" mode="widthFix" />
			<view class="empty_tip">暂无商品信息</view>
		</view>
	</view>
</template>

<script setup>
	import { computed, ref } from 'vue';
	import request from '@/utils/common/request/index';
	import { useGetThemColor } from '@/hooks/useGetThemColor';

	const { primaryColor } = useGetThemColor();
	const props = defineProps({
		data: Object,
		imgHost: String,
	});
	const config = props.data;
	const style = computed(() => {
		let formatStyle = {};
		for (let key in config.style) {
			formatStyle[key] = config.style[key] + 'px';
		}
		formatStyle['modelLeftRightHalf'] = config.style['modelLeftRight'] / 2 + 'px';
		return formatStyle;
	});

	const list = ref([]);
	let paramsUrl = '/api/goodslist';
	const loadFinished = ref(false);
	config.goodsId.forEach((item, index) => {
		if (index === 0) {
			paramsUrl += '?goods_id[]=' + item;
		} else {
			paramsUrl += '&goods_id[]=' + item;
		}
	});
	request({
		url: paramsUrl,
	}).then((res) => {
		list.value = res.data;
		loadFinished.value = true;
	});

	const goProductDetail = (id) => {
		uni.navigateTo({
			url: `/pages/productDetail/productDetail?id=${id}`,
		});
	};
</script>

<style lang="scss">
	.goodsWrap1 {
		padding: 0 v-bind('style.modelLeftRight');
	}

	.goodsWrap2 {
		display: flex;
		flex-wrap: wrap;
		padding: 0 v-bind('style.modelLeftRight');

		.goodsInfo {
			width: 50%;
			display: flex;

			&:nth-of-type(odd)::after {
				content: '';
				display: block;
				width: v-bind('style.modelLeftRightHalf');
			}

			&:nth-of-type(even)::before {
				content: '';
				display: block;
				width: v-bind('style.modelLeftRightHalf');
			}
		}

		.goods {
			flex: 1;

			.imgWrap {
				position: relative;
				padding-bottom: 100%;

				::v-deep .u-image {
					position: absolute;
					left: 0;
					right: 0;
					bottom: 0;
					top: 0;
				}
			}

			.title {
				height: 38px;
			}
		}
	}

	.goods {
		margin-top: v-bind('style.modelTop');
		margin-bottom: v-bind('style.modelbottom');
		padding-bottom: 8px;
		background-color: #fff;
		border-radius: v-bind('style.goodsRaius');
		overflow: hidden;

		::v-deep .u-image__image {
			display: flex !important;
		}

		.title {
			padding-top: 8px;
			color: #666c75;
		}

		.bottom {
			padding-top: 8px;
			display: flex;

			.price {
				flex: 1;
				font-size: 16px;
				font-weight: 600;
				color: v-bind(primaryColor);
			}

			.saled {
				color: #999;
			}
		}
	}

	.emptyWrap {
		text-align: center;
		padding: 20rpx 0;

		.img {
			width: 500rpx;
		}

		.empty_tip {
			font-size: 13px;
			color: #999;
		}
	}
</style>